<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Example: Offline Caching</title>
    <link rel="stylesheet" href="http://yui.yahooapis.com/3.4.0pr3/build/cssgrids/grids-min.css">
    <link rel="stylesheet" href="../assets/css/main.css">
    <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
    <script src="../../build/yui/yui-min.js"></script>
</head>
<body>

<div id="doc">
    <h1>Example: Offline Caching</h1>

    

    <div class="yui3-g">
        <div id="main" class="yui3-u">
            <div class="content"><div class="intro">
    <p>OfflineCache stores data in HTML 5 localStorage when available so that data persists across browser sessions. When localStorage is disabled or altogether unavailable (i.e., IE6 and IE7) data is simply cached in local JavaScript memory and will not persist across browser sessions.</p>
</div>

<div class="example">
    <style scoped>
/* custom styles for this example */
.demo fieldset {display:block; border:0;}
.demo .short {width:2em;}
</style>

<form id="demo1" class="demo">
    <h6>CacheOffline Instance #1</h6>
    <fieldset>
        <label for="demo1_expires">Data expires after: <input type="text" id="demo1_expires" class="med" value="86400000"> milliseconds
        <input type="button" id="demo1_setExpires" value="Set expires"></label>
    </fieldset>
    <fieldset>
        <label for="demo1_addKey">Key: <input type="text" id="demo1_addKey"></label>
        <label for="demo1_addValue">Value: <input type="text" id="demo1_addValue"></label>
        <input type="button" id="demo1_add" value="Cache value">
    </fieldset>
    <fieldset>
        <label for="demo1_retrieveKey">Key: <input type="text" id="demo1_retrieveKey"></label>
        <input type="button" id="demo1_retrieve" value="Retrieve value">
    </fieldset>
    <fieldset>
        <input type="button" id="demo1_flush" value="Flush cache"></label>
    </fieldset>
</form>

<form id="demo2" class="demo">
    <h6>CacheOffline Instance #2</h6>
    <fieldset>
        <label for="demo2_expires">Data expires after: <input type="text" id="demo2_expires" class="med" value="86400000"> milliseconds
        <input type="button" id="demo2_setExpires" value="Set expires"></label>
    </fieldset>
    <fieldset>
        <label for="demo2_addKey">Key: <input type="text" id="demo2_addKey"></label>
        <label for="demo2_addValue">Value: <input type="text" id="demo2_addValue"></label>
        <input type="button" id="demo2_add" value="Cache value">
    </fieldset>
    <fieldset>
        <label for="demo2_retrieveKey">Key: <input type="text" id="demo2_retrieveKey"></label>
        <input type="button" id="demo2_retrieve" value="Retrieve value">
    </fieldset>
    <fieldset>
        <input type="button" id="demo2_flush" value="Flush cache"></label>
    </fieldset>
</form>


<script>
YUI().use("node", "datatype-number", "cache-offline" ,function (Y) {
    var cache1 = new Y.CacheOffline({sandbox:"instance1"});

    Y.on("click", function(e){
        cache1.set("expires", Y.DataType.Number.parse(Y.one("#demo1_expires").get("value")));
        alert("Cache 1 \"expires\" set to " + cache1.get("expires") + ".");
    }, "#demo1_setExpires");

    Y.on("click", function(e){
        cache1.add(Y.one("#demo1_addKey").get("value"), Y.one("#demo1_addValue").get("value"));
        var msg = "Value cached. Cache 1 \"size\" is now " + cache1.get("size") + ".";
        alert(msg);
    }, "#demo1_add");

    Y.on("click", function(e){
        var entry = cache1.retrieve(Y.one("#demo1_retrieveKey").get("value")),
            output = entry ? entry.response : "Value not cached.";
        alert(output);
    }, "#demo1_retrieve");

    Y.on("click", function(e){
        cache1.flush();
        alert("Cache 1 flushed.");
    }, "#demo1_flush");

    var cache2 = new Y.CacheOffline({sandbox:"instance2"});

    Y.on("click", function(e){
        cache2.set("expires", Y.DataType.Number.parse(Y.one("#demo2_expires").get("value")));
        alert("Cache 2 \"expires\" set to " + cache2.get("expires") + ".");
    }, "#demo2_setExpires");

    Y.on("click", function(e){
        cache2.add(Y.one("#demo2_addKey").get("value"), Y.one("#demo2_addValue").get("value"));
        var msg = "Value cached. Cache 2 \"size\" is now " + cache2.get("size") + ".";
        alert(msg);
    }, "#demo2_add");

    Y.on("click", function(e){
        var entry = cache2.retrieve(Y.one("#demo2_retrieveKey").get("value")),
            output = entry ? entry.response : "Value not cached.";
        alert(output);
    }, "#demo2_retrieve");

    Y.on("click", function(e){
        cache2.flush();
        alert("Cache 2 flushed.");
    }, "#demo2_flush");
});
</script>

</div>

<pre class="code prettyprint">YUI().use(&quot;cache-offline&quot;, function(Y) {
    var cache = new Y.CacheOffline({
        sandbox:&quot;6-hr-cache&quot;, &#x2F;&#x2F; Pass in a unique identifier
        expires:21600000 &#x2F;&#x2F; Expire data after 6 hours
    });

    &#x2F;&#x2F; Add entries to the Cache
    cache.add(&quot;key1&quot;, &quot;value1&quot;);
    cache.add(&quot;key2&quot;, &quot;value2&quot;);

    &#x2F;&#x2F; Retrieve a cached entry
    var cachedentry = cache.retrieve(&quot;key1&quot;);

    &#x2F;&#x2F; Cached entry is an object with the following properties
    alert(&quot;cached key: &quot; + cachedentry.request +
        &quot; cached value: &quot; + cachedentry.response +
        &quot; cached at: &quot; + cachedentry.cached +
        &quot; expires at: &quot; + cachedentry.expires);

    &#x2F;&#x2F; Flush the cache
    cache.flush();
});</pre>


<h2>Complete Example Source</h2>

<pre class="code prettyprint">&lt;style scoped&gt;
&#x2F;* custom styles for this example *&#x2F;
.demo fieldset {display:block; border:0;}
.demo .short {width:2em;}
&lt;&#x2F;style&gt;

&lt;form id=&quot;demo1&quot; class=&quot;demo&quot;&gt;
&lt;h6&gt;CacheOffline Instance #1&lt;&#x2F;h6&gt;
&lt;fieldset&gt;
    &lt;label for=&quot;demo1_expires&quot;&gt;Data expires after: &lt;input type=&quot;text&quot; id=&quot;demo1_expires&quot; class=&quot;med&quot; value=&quot;86400000&quot;&gt; milliseconds
    &lt;input type=&quot;button&quot; id=&quot;demo1_setExpires&quot; value=&quot;Set expires&quot;&gt;&lt;&#x2F;label&gt;
&lt;&#x2F;fieldset&gt;
&lt;fieldset&gt;
    &lt;label for=&quot;demo1_addKey&quot;&gt;Key: &lt;input type=&quot;text&quot; id=&quot;demo1_addKey&quot;&gt;&lt;&#x2F;label&gt;
    &lt;label for=&quot;demo1_addValue&quot;&gt;Value: &lt;input type=&quot;text&quot; id=&quot;demo1_addValue&quot;&gt;&lt;&#x2F;label&gt;
    &lt;input type=&quot;button&quot; id=&quot;demo1_add&quot; value=&quot;Cache value&quot;&gt;
&lt;&#x2F;fieldset&gt;
&lt;fieldset&gt;
    &lt;label for=&quot;demo1_retrieveKey&quot;&gt;Key: &lt;input type=&quot;text&quot; id=&quot;demo1_retrieveKey&quot;&gt;&lt;&#x2F;label&gt;
    &lt;input type=&quot;button&quot; id=&quot;demo1_retrieve&quot; value=&quot;Retrieve value&quot;&gt;
&lt;&#x2F;fieldset&gt;
&lt;fieldset&gt;
    &lt;input type=&quot;button&quot; id=&quot;demo1_flush&quot; value=&quot;Flush cache&quot;&gt;&lt;&#x2F;label&gt;
&lt;&#x2F;fieldset&gt;
&lt;&#x2F;form&gt;

&lt;form id=&quot;demo2&quot; class=&quot;demo&quot;&gt;
&lt;h6&gt;CacheOffline Instance #2&lt;&#x2F;h6&gt;
&lt;fieldset&gt;
    &lt;label for=&quot;demo2_expires&quot;&gt;Data expires after: &lt;input type=&quot;text&quot; id=&quot;demo2_expires&quot; class=&quot;med&quot; value=&quot;86400000&quot;&gt; milliseconds
    &lt;input type=&quot;button&quot; id=&quot;demo2_setExpires&quot; value=&quot;Set expires&quot;&gt;&lt;&#x2F;label&gt;
&lt;&#x2F;fieldset&gt;
&lt;fieldset&gt;
    &lt;label for=&quot;demo2_addKey&quot;&gt;Key: &lt;input type=&quot;text&quot; id=&quot;demo2_addKey&quot;&gt;&lt;&#x2F;label&gt;
    &lt;label for=&quot;demo2_addValue&quot;&gt;Value: &lt;input type=&quot;text&quot; id=&quot;demo2_addValue&quot;&gt;&lt;&#x2F;label&gt;
    &lt;input type=&quot;button&quot; id=&quot;demo2_add&quot; value=&quot;Cache value&quot;&gt;
&lt;&#x2F;fieldset&gt;
&lt;fieldset&gt;
    &lt;label for=&quot;demo2_retrieveKey&quot;&gt;Key: &lt;input type=&quot;text&quot; id=&quot;demo2_retrieveKey&quot;&gt;&lt;&#x2F;label&gt;
    &lt;input type=&quot;button&quot; id=&quot;demo2_retrieve&quot; value=&quot;Retrieve value&quot;&gt;
&lt;&#x2F;fieldset&gt;
&lt;fieldset&gt;
    &lt;input type=&quot;button&quot; id=&quot;demo2_flush&quot; value=&quot;Flush cache&quot;&gt;&lt;&#x2F;label&gt;
&lt;&#x2F;fieldset&gt;
&lt;&#x2F;form&gt;


&lt;script&gt;
YUI().use(&quot;node&quot;, &quot;datatype-number&quot;, &quot;cache-offline&quot; ,function (Y) {
var cache1 = new Y.CacheOffline({sandbox:&quot;instance1&quot;});

Y.on(&quot;click&quot;, function(e){
    cache1.set(&quot;expires&quot;, Y.DataType.Number.parse(Y.one(&quot;#demo1_expires&quot;).get(&quot;value&quot;)));
    alert(&quot;Cache 1 \&quot;expires\&quot; set to &quot; + cache1.get(&quot;expires&quot;) + &quot;.&quot;);
}, &quot;#demo1_setExpires&quot;);

Y.on(&quot;click&quot;, function(e){
    cache1.add(Y.one(&quot;#demo1_addKey&quot;).get(&quot;value&quot;), Y.one(&quot;#demo1_addValue&quot;).get(&quot;value&quot;));
    var msg = &quot;Value cached. Cache 1 \&quot;size\&quot; is now &quot; + cache1.get(&quot;size&quot;) + &quot;.&quot;;
    alert(msg);
}, &quot;#demo1_add&quot;);

Y.on(&quot;click&quot;, function(e){
    var entry = cache1.retrieve(Y.one(&quot;#demo1_retrieveKey&quot;).get(&quot;value&quot;)),
        output = entry ? entry.response : &quot;Value not cached.&quot;;
    alert(output);
}, &quot;#demo1_retrieve&quot;);

Y.on(&quot;click&quot;, function(e){
    cache1.flush();
    alert(&quot;Cache 1 flushed.&quot;);
}, &quot;#demo1_flush&quot;);

var cache2 = new Y.CacheOffline({sandbox:&quot;instance2&quot;});

Y.on(&quot;click&quot;, function(e){
    cache2.set(&quot;expires&quot;, Y.DataType.Number.parse(Y.one(&quot;#demo2_expires&quot;).get(&quot;value&quot;)));
    alert(&quot;Cache 2 \&quot;expires\&quot; set to &quot; + cache2.get(&quot;expires&quot;) + &quot;.&quot;);
}, &quot;#demo2_setExpires&quot;);

Y.on(&quot;click&quot;, function(e){
    cache2.add(Y.one(&quot;#demo2_addKey&quot;).get(&quot;value&quot;), Y.one(&quot;#demo2_addValue&quot;).get(&quot;value&quot;));
    var msg = &quot;Value cached. Cache 2 \&quot;size\&quot; is now &quot; + cache2.get(&quot;size&quot;) + &quot;.&quot;;
    alert(msg);
}, &quot;#demo2_add&quot;);

Y.on(&quot;click&quot;, function(e){
    var entry = cache2.retrieve(Y.one(&quot;#demo2_retrieveKey&quot;).get(&quot;value&quot;)),
        output = entry ? entry.response : &quot;Value not cached.&quot;;
    alert(output);
}, &quot;#demo2_retrieve&quot;);

Y.on(&quot;click&quot;, function(e){
    cache2.flush();
    alert(&quot;Cache 2 flushed.&quot;);
}, &quot;#demo2_flush&quot;);
});
&lt;&#x2F;script&gt;</pre>

</div>
        </div>

        <div id="sidebar" class="yui3-u">
            

            
                <div class="sidebox">
                    <div class="hd">
                        <h2 class="no-toc">Examples</h2>
                    </div>

                    <div class="bd">
                        <ul class="examples">
                            
                                
                                    <li data-description="Basic caching functionality with the Cache Utility.">
                                        <a href="cache-basic.html">Basic Caching</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Offline caching implements HTML 5 localStorage when available, to allow data to persist across browser sessions.">
                                        <a href="cache-offline.html">Offline Caching</a>
                                    </li>
                                
                            
                                
                            
                                
                            
                        </ul>
                    </div>
                </div>
            

            
                <div class="sidebox">
                    <div class="hd">
                        <h2 class="no-toc">Examples That Use This Component</h2>
                    </div>

                    <div class="bd">
                        <ul class="examples">
                            
                                
                            
                                
                            
                                
                                    <li data-description="Use the DataSourceCache plugin to enable caching and reduce server calls to remote sources.">
                                        <a href="../datasource/datasource-caching.html">DataSource with Caching</a>
                                    </li>
                                
                            
                                
                                    <li data-description="The DataSourceCache plugin supports offline caching so that cached data persists across browser sessions.">
                                        <a href="../datasource/datasource-offlinecache.html">DataSource with Offline Cache</a>
                                    </li>
                                
                            
                        </ul>
                    </div>
                </div>
            
        </div>
    </div>
</div>

<script src="../assets/vendor/prettify/prettify-min.js"></script>
<script>prettyPrint();</script>

</body>
</html>
